import React from 'react'
import './Movies.css'
import movies from './movies.json'

function MovieItem(props) {
  const {title,issueDates,actors,genres,ratingAvg,image} = props  
  console.log(image);
  return <>
    <div className='MovieItemWrapper'>
      <div className='movieCon'>
        <div className='movieImg'>
          <img src={'http://localhost:3000'+image} alt='' className='ExhibitionImg'/>
        </div>
        <div className='movieInfo'>
          <div className='movieItemTitle'>
          {title}<span className='play'>[可播放]</span>
          </div>
          <div className='performerIntroduce'>
            <div className='moviePerformerinfo'>{issueDates} / {actors.map(item=>item+' ,')},
            </div>
            <div className='movieType'>
              {genres.map(item=>item+'/')}
            </div>
          </div>
          <div className='evaluateBox'>
            <div className='assess'>☆☆☆☆☆</div>
            <span className='score'>{ratingAvg}</span>
            <span className='support'>1899956评价</span>
          </div>
          <div className='coachTxt'>一部美国近现代史</div>
        </div>
      </div>
    </div>
  </>
  }

function MovieList(props) {

  return <>
  <div className='MoviesListWrapper'>
  <h2 className='movieTitie'>豆瓣电影 Top 250</h2>
    {
      movies.map(item=>(
        <MovieItem 
        key={item.id}
        title={item.title}
        year={item.year} // 上演年数
        issueDates={item.issueDates} // 各国上演日期
        actors={item.actors} // 演员
        genres={item.genres} // 电影类型
        aliases={item.aliases} // 别名
        ratingAvg={item.ratingAvg} // 评分
        image={item.image} // 图片
        />
      ))
    }
  </div>
  </>
}

export default MovieList